<script setup lang="ts">
import { computed, reactive, watch } from 'vue';

export interface NewBaseSelectAreaProps {
  item: any;
  powerId: string;
  lineId: string;
  areaId: string;
  list: any[];
}

const props = withDefaults(defineProps<NewBaseSelectAreaProps>(), {
  powerId: '',
  lineId: '',
  areaIdL: '',
  item: () => {},
  list: () => [],
});

const emits = defineEmits(['change', 'update:powerId', 'update:areaId', 'update:lineId']);

const LineSelect = ref('LineSelect');
const AreaSelect = ref('AreaSelect');
const handleChange = (key: string, val: any, item: any, name) => {
  emits('change', { key, value: val, item, name });
};
watch(
  () => props.powerId,
  (newVal) => {
    LineSelect.value.selectValue = '';
    AreaSelect.value.selectValue = '';
    const lineLen = LineSelect.value.list.length;
    const areaLen = AreaSelect.value.list.length;

    if (!newVal) {
      LineSelect.value.list = [];
      AreaSelect.value.list = [];
    } else {
      LineSelect.value.list.splice(lineLen - 1, 1);
      AreaSelect.value.list.splice(areaLen - 1, 1);
    }
  },
);

watch(
  () => props.lineId,
  (newVal) => {
    AreaSelect.value.selectValue = '';
    const areaLen = AreaSelect.value.list.length;
    if (!newVal) {
      AreaSelect.value.list = [];
    } else {
      AreaSelect.value.list.splice(areaLen - 1, 1);
    }
  },
);
</script>

<template>
  <div>
    <el-row :gutter="20" type="flex">
      <el-col :span="8">
        <new-base-select
          :defaultSelectedRow="item"
          v-model="props.powerId"
          option-key="powerId"
          option-name="powerName"
          option-code="powerCode"
          url="getByAreaQueryByPower"
          :option-props="{
            name: 'powerName',
            value: 'powerId',
          }"
          @change="(val, item) => handleChange('powerId', val, item, 'powerName')"
        >
        </new-base-select>
      </el-col>
      <el-col :span="8">
        <new-base-select
          ref="LineSelect"
          :defaultSelectedRow="item"
          v-model="props.lineId"
          option-key="lineId"
          option-name="lineName"
          option-code="lineCode"
          url="getByAreaQueryByLine"
          :option-props="{
            name: 'lineName',
            value: 'lineId',
          }"
          :search="{
            powerId,
          }"
          @change="(val, item) => handleChange('lineId', val, item, 'lineName')"
        ></new-base-select>
      </el-col>
      <el-col :span="8">
        <new-base-select
          ref="AreaSelect"
          :defaultSelectedRow="item"
          option-key="areaId"
          option-name="areaName"
          option-code="areaCode"
          url="getByAreaQueryByArea"
          v-model="props.areaId"
          :option-props="{
            name: 'areaName',
            value: 'areaId',
          }"
          :search="{
            powerId,
            lineId,
          }"
          @change="(val, item) => handleChange('areaId', val, item, 'areaName')"
        ></new-base-select>
      </el-col>
    </el-row>
  </div>
</template>
